<template>
  <div class="mainContent bs">
    <div class="title df">
      <!-- <h3>{{nav[$route.name]['title']}}&gt;{{nav[$route.name]['list'][$route.params.title]}}</h3> -->
      <h3>{{headTitle}}</h3>
      <span class="cp us">more</span>
    </div>
    <ul class="df fdc jc ai">
      <li class="list-con bs df fdc" v-for="(item, idx) in datalist.list" :key="item.id">
        <a @click="toDetail(item.id)" href="javascript:;" class="f16">{{idx+1}}、{{item.title}}</a>
        <span class="f12">{{item.time}}</span>
        <p class="f14">{{item.content}}</p>
      </li>
    </ul>
  </div>
</template>

<script src="./mainContent.js"></script>

<style lang="scss" scoped>
.mainContent{
  padding: 20px;
  background-color: #F2F1EF;
  .title{
    justify-content: space-between;
    margin-bottom: 10px;
    h3{
      font-size: 25px;
    }
  }
  .list-con{
    background-color: white;
    padding: 10px 10px;
    margin-bottom: 10px;
    align-items: flex-start;
    span.f12{
      color: yellowgreen;
    }
    a, p{
      display: inline-block;
      width: 770px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }
    a{
      color: black;
      &:hover{
        color: #CC6600;
      }
    }
  }
}
</style>
